<template>
	<view class="onebox">
		<view class="order" v-for="(item,index) in CommentList" :key="index">
			<view class="box1">
				<view class="">
					<image style="height: 80rpx; width: 80rpx; border-radius: 50%;" :src="item.avatar" mode="">
					</image>
				</view>
				<view class="" style="margin-left: 15rpx;">
					<view class="" style="font-size: 28rpx; font-weight: 600;">
						{{item.nickname}}
					</view>
					<view class="" style="font-size: 26rpx; color: #A3A2A2; margin-top: 16rpx;">
						{{$setTime(item.createtime)}}
					</view>
				</view>
			</view>
			<view class="box3" style="margin-top: 20rpx;">
				{{item.content}}
				<image v-if="item.image!=''" style="width: 100rpx; height: 100rpx; border-radius: 8rpx;"
					:src="item.image" mode=""></image>
			</view>
			<view class="text-tz">
				<!-- 回复帖子的 -->
				<view @click="tzDetalis(item.reply_tz.id)" v-if="item.reply_id==0" class="box2">
					<image v-if="item.reply_tz.images!=''"
						style="height: 60rpx; width: 60rpx; border-radius: 8rpx; margin-right: 20rpx;"
						:src="item.reply_tz.images.split(',')[0]" mode=""></image>
					<text v-if="item.reply_tz.nav_name">#{{item.reply_tz.nav_name}}#</text>
					{{item.reply_tz.content}}

				</view>
				<!-- 回复评论 -->
				<view @click="tzDetalis(item.reply_cm.tz_id)" v-if="item.reply_id!=0&&item.reply_cm!=null" class="box3">
					{{item.reply_cm.content}}
					<image v-if="item.reply_cm.image!=''"
						style="height: 60rpx; width: 60rpx; border-radius: 8rpx; margin-top: 10rpx;"
						:src="item.reply_cm.image" mode=""></image>
				</view>
				<view v-if="item.reply_id!=0&&item.reply_cm==null" class="box3">
					该评论已被删除
				</view>
			</view>
		</view>
		<view class="nomore">没有了</view>
	</view>
</template>

<script>
	import $api from '../../common/request3.js'
	export default {
		data() {
			return {
				CommentList: [],
				page: '1',
				"isHas": true,
			}
		},
		onLoad() {
			this.openid = uni.getStorageSync('openid');
			this.key = uni.getStorageSync('key');
			this.GetCommentList('reset')
		},
		methods: {
			onReachBottom() {
				this.page++;
				this.GetCommentList('add')
			},
			GetCommentList(type) {
				if (type == "reset") {
					this.CommentList = [];
					this.page = 1;
				}
				$api.request({
					url: "lt/getMyCommentList",
					method: 'POST',
					data: {
						key: this.key,
						openid: this.openid,
						page: this.page
					}
				}).then((res) => {
				let arr = res.data || [];
				this.isHas = arr.length > 10;
				arr.map(item => {
					this.CommentList.push(item)
				})
				console.log(this.CommentList, '55555')
				}).catch((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			},
			tzDetalis(id) {
				uni.navigateTo({
					url: `/pages/index/details?tz_id=${id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.onebox {
		min-height: 100vh;
		background-color: #F6F7F8;
	}

	.order {
		background-color: #fff;
		padding: 26rpx;
		margin-bottom: 10rpx;

		.box1 {
			display: flex;
			align-items: center;
		}

		.text-tz {
			background-color: #F6F7F8;
			margin-top: 20rpx;
			border: 6rpx;
			color: #A3A2A2;
			padding: 16rpx;
			font-size: 26rpx;
		}
	}

	.box3 {
		display: flex;
		// align-items: center;
		flex-direction: column;
	}

	.box2 {
		display: flex;
		align-items: center;
	}
</style>